/**
 * Created by liujinghao on 12/13 0013.
 *
 */

// 游客性别统计  男
option_sex1 = {
    // color: ['#4bb6fc', 'rgba(255, 255, 255, 0.2)', '#fbed47', 'rgba(255, 255, 255, 0.2)', '#ff202b', 'rgba(255, 255, 255, 0.2)', '#4bb6fc', 'rgba(255, 255, 255, 0.2)'],
    // tooltip: {
    //     trigger: 'item',
    //     formatter: "{a} <br/>{b}: {c} ({d}%)"
    // },
    series: [{
        name: '游客性别统计',
        startAngle: 90,
        radius: ['50%', '65%'],
        hoverAnimation: false,
        type: 'pie',
        labelLine: {
            normal: {
                show: false
            }
        },
        color: [{
            type: 'linear',
            x2: 0.4,
            y2: 1,
            colorStops: [{
                offset: 0,
                color: "#4b81fc" // 0% 处的颜色
            }, {
                offset: 1,
                color: "#489b27" // 100% 处的颜色
            }],
            globalCoord: false // 缺省为 false
        }, 'none'],
        data: [{
            value: 20,
            name: '\n\n20%',
            itemStyle: {
                normal: {
                    color: "#1b2954"
                },

            },
            label: {
                normal: {
                    position: 'center',
                    show: true,
                    textStyle: {
                        fontSize: '22',
                        color: '#4bb6fc'
                    }
                }
            }
        }, {
            value: 50
        }]
    },]
};

// 游客性别统计  女
option_sex2 = {
    // color: ['#ff202b', 'rgba(255, 255, 255, 0.2)', '#fbed47', 'rgba(255, 255, 255, 0.2)', '#ff202b', 'rgba(255, 255, 255, 0.2)', '#4bb6fc', 'rgba(255, 255, 255, 0.2)'],
    // tooltip: {
    //     trigger: 'item',
    //     formatter: "{a} <br/>{b}: {c} ({d}%)"
    // },
    series: [{
        name: '游客性别统计',
        startAngle: 90,
        radius: ['50%', '65%'],
        hoverAnimation: false,
        type: 'pie',
        labelLine: {
            normal: {
                show: false
            }
        },
        color: [{
            type: 'linear',
            x2: 0.4,
            y2: 1,
            colorStops: [{
                offset: 0,
                color: "#faba86" // 0% 处的颜色
            }, {
                offset: 1,
                color: "#f78306" // 100% 处的颜色
            }],
            globalCoord: false // 缺省为 false
        }, 'none'],
        data: [{
            value: 50,
            name: '\n\n20%',
            itemStyle: {
                normal: {
                    color: "#1b2954"
                },

            },
            label: {
                normal: {
                    position: 'center',
                    show: true,
                    textStyle: {
                        fontSize: '22',
                        color: '#f59727'
                    }
                }
            }
        }, {
            value: 1000
        }]
    },]
};

var sex1 = echarts.init(document.getElementById('sex1'));
sex1.setOption(option_sex1);
var sex2 = echarts.init(document.getElementById('sex2'));
sex2.setOption(option_sex2);

// function setSex(data) {
//     // option_sex1.series[0].data[1].value = data[1].value;
//     option_sex1.series[0].data[0].name = '\n\n\n' + data[0].num + '%';
//     option_sex1.series[0].data[1].value = data[0].num;
//     option_sex1.series[0].data[0].value = 100 - Number(data[0].num);

//     // option_sex2.series[0].data[1].value = data[1].value;
//     option_sex2.series[0].data[0].name = '\n\n\n' + data[1].num + '%';
//     option_sex2.series[0].data[1].value = data[0].num;
//     option_sex2.series[0].data[0].value = 100 - Number(data[1].num);
//     $("#sv1").text(data[0].value);
//     $("#sv2").text(data[1].value);
//     var sex1 = echarts.init(document.getElementById('sex1'));
//     sex1.setOption(option_sex1);
//     var sex2 = echarts.init(document.getElementById('sex2'));
//     sex2.setOption(option_sex2);
// }

// 游客年龄统计
var dataStyle = {
    normal: {
        label: { show: false },
        labelLine: { show: false },
        shadowBlur: 40,
        shadowColor: 'rgba(40, 40, 40, 0.5)',
    }
};
var placeHolderStyle = {
    normal: {
        color: 'rgba(0,0,0,0)',
        label: { show: false },
        labelLine: { show: false }
    },
    emphasis: {
        color: 'rgba(0,0,0,0)'
    }
};
option_age = {
    color: ['#02485a', '#0d7987', '#21e8eb', '#89f5f5'],
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        bottom: 50,
        left: 'center',
        itemWidth: 30,
        itemGap: 20,
        textStyle: {
            fontSize: 12,
            color: '#fff'
        },
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', , '视频哈哈', '搜索引擎']
    },
    label: {
        normal: {
            textStyle: {
                color: "#ffffff"
            }
        }
    },
    series: [
        {
            name: '游客年龄统计',
            type: 'pie',
            radius: '40%',
            center: ['50%', '40%'],
            data: [
                { value: 335, name: '直接访问' },
                { value: 310, name: '邮件营销' },
                { value: 234, name: '联盟广告' },
                { value: 135, name: '视频广告' },
                { value: 135, name: '视频哈哈' },
                { value: 1548, name: '搜索引擎' }
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
var ageDiv = echarts.init(document.getElementById('ageDiv'));
ageDiv.setOption(option_age);
// function setAge(data) {
//     option_age.series[0].data = [];
//     option_age.legend.data = data.name;
//     data.name.forEach(function (val, index) {
//         var obj = {};
//         obj.name = val;
//         obj.value = data.value[index];
//         option_age.series[0].data.push(obj)
//     });

//     var ageDiv = echarts.init(document.getElementById('ageDiv'));
//     ageDiv.setOption(option_age);
// }


// 星座雷达图
var color = "#fff";
var scale = 1;

// var starDiv = echarts.init(document.getElementById('starDiv'));
// starDiv.setOption(option_star);
var student = [500, 600, 650, 620, 650, 600, 500, 600, 450, 400, 300];
// function setStar(data) {
//     student = data.value;
//     weekData = [];
//     var maxValue = Math.max.apply(null, data.value);
//     data.name.forEach(function (val, index) {
//         var obj = {};
//         obj.text = val;
//         obj.max = maxValue;
//         weekData.push(obj)
//     })
    option_star = {
        radar: [
            {
            // indicator: weekData,
            indicator: [{ name: "水瓶座", max: 802 }, { name: "双鱼座", max: 802 }, { name: "白羊座", max: 802 }, { name: "金牛座", max: 802 }, { name: "双子座", max: 802 }, { name: "巨蟹座", max: 802 }, { name: "狮子座", max: 802 }, { name: "处女座", max: 802 }, { name: "天秤座", max: 802 }, { name: "天蝎座", max: 802 }, { name: "射手座", max: 802 }, { name: "摩羯座", max: 802 },],
            center: ['50%', '55%'],
            radius: '50%',
            name: {
                textStyle: {
                    color: color,
                    fontSize: 14 * scale,
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#333',
                    opacity: 0.5,
                    width: 3 * scale
                },
            },
            splitArea: {
                areaStyle: {
                    color: ['rgba(0,0,0,0)', 'rgba(255,255,255,0.05)']
                }
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#333',
                }
            }
        },
    ],
    series: [
        {
            type: 'radar',
            data: [
                {
                    value: student,
                    name: '星座'
                }
            ],
            symbolSize: 1,
            itemStyle: {
                normal: {
                    borderColor: '#4bb6fc',
                    borderWidth: 5 * scale,
                }
            },
            lineStyle: {
                normal: {
                    color: "#4bb6fc",
                    width: 3 * scale
                }
            },
            areaStyle: {
                normal: {
                    color: '#4bb6fc',
                    opacity: 0.5
                }
            }
        },
    ]
};
var starDiv = echarts.init(document.getElementById('starDiv'));
starDiv.setOption(option_star);
// }

// 游客客源地统计
function setCustom(data) {
    var cnum = [];
    data.forEach(function (val, index) {
        var obj = {};
        obj.name = val.name;
        obj.value = val.value;
        cnum.push(obj)
    })
    var cArr = utils.linerScale(cnum, 'value')
    // let cArr = data.cnum
    cArr.slice(0, 5).forEach(function (item, key) {
        var $dom = $(".customer .box1 li").eq(key);
        $dom.find(".name span").text(item.name);
        $dom.find(".name strong").text(item.value);
        $dom.find(".vol span").width(item.per + '%')
    })
    cArr.slice(5, 10).forEach(function (item, key) {
        var $dom = $(".customer .box2 li").eq(key);
        $dom.find(".name span").text(item.name);
        $dom.find(".name strong").text(item.value);
        $dom.find(".vol span").width(item.per + '%')
    })
}

// 职业分布情况
function setProfession(data) {
    //var cArr = utils.linerScale(data.cnum, 'value')
    // let cArr = data.cnum
    data.cnum.slice(0, 5).forEach(function (item, key) {
        var $dom = $(".profession .box1 li").eq(key);
        $dom.find(".vol").attr('title', '分布占比：' + data.cnum[key].value)
        $dom.find(".vol").addClass('tooltips')

        var $dom = $(".profession .box1 li").eq(key);
        $dom.find(".name i").text(key + 1);
        $dom.find(".name span").text(item.name);
        $dom.find("strong").text(Math.round(item.per) + '%');
        $dom.find(".vol span").width(item.per + '%')
    })
}

// 学历统计
function xueLi(data) {
    let cArr = data.list;
    cArr.forEach(function (item, key) {
        if (item.per !== "0") {
            $(".statistics ul li").eq(key).attr('title', '占比：' + item.per + "%");
            $(".statistics ul li").eq(key).text(item.name).width(item.per + "%");
        } else {
            $(".statistics ul li").eq(key).width(item.per + "%");
        }
    })
}

//  中国地图
var data = [
    { name: '海门', value: 2653 },
    { name: '鄂尔多斯', value: 12 },
    { name: '招远', value: 120 },
    { name: '舟山', value: 120 },
    { name: '齐齐哈尔', value: 14 },
    { name: '盐城', value: 15 },
    { name: '赤峰', value: 600 },
    { name: '青岛', value: 108 },
    { name: '乳山', value: 18 },
    { name: '金昌', value: 19 },
    { name: '泉州', value: 11150 },
    { name: '莱西', value: 221 },
    { name: '日照', value: 21 },
    { name: '胶南', value: 22 },
    { name: '南通', value: 23 },
    { name: '拉萨', value: 14 },
    { name: '云浮', value: 24 },
    { name: '梅州', value: 25 },
];
var geoCoordMap = {
    '海门': [121.15, 31.89],
    '鄂尔多斯': [109.781327, 39.608266],
    '招远': [120.38, 37.35],
    '舟山': [122.207216, 29.985295],
    '齐齐哈尔': [123.97, 47.33],
    '盐城': [120.13, 33.38],
    '赤峰': [118.87, 42.28],
    '青岛': [120.33, 36.07],
    '乳山': [121.52, 36.89],
    '金昌': [102.188043, 38.520089],
    '泉州': [118.58, 24.93],
    '莱西': [120.53, 36.86],
    '日照': [119.46, 35.42],
    '胶南': [119.97, 35.88],
    '南通': [121.05, 32.08],
    '拉萨': [91.11, 29.97],
    '云浮': [112.02, 22.93],
    '梅州': [116.1, 24.55],
};

var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value, data[i].per)
            });
        }
    }
    return res;
};
function mapData() {
    option_china = {
        tooltip: {
            show: true,
            "formatter": function (params) {
                var obj = JSON.parse(JSON.stringify(params));
                var str = obj.name + ":" + obj.data.value[2];
                return str;
            }
        },
        geo: {
            map: 'china',
            label: {
                emphasis: {
                    textStyle: {
                        color: '#fff',
                        fontSize: 16,
                    },
                    show: true
                }
            },
            roam: false,
            itemStyle: {
                normal: {
                    areaColor: 'rgba(255,255,255,0.2)',
                    borderColor: '#fff'
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            }
        },
        series: [
            {

                name: 'Top 10',
                type: 'effectScatter',
                coordinateSystem: 'geo',
                data: convertData(data.sort(function (a, b) {
                    return b.value - a.value;
                }).slice(0, 10)),
                symbolSize: function (val) {
                    let size = 0
                    if (val[3] > 50) {
                        size = 30
                    } else if (val[3] < 3) {
                        size = 3
                    } else {
                        size = val[3]
                    }
                    console.log(val, size)
                    return size
                    // return Math.sqrt(val[2]) > 50?30:Math.sqrt(val[2]);
                },
                showEffectOn: 'render',
                rippleEffect: {
                    brushType: 'stroke'
                },
                hoverAnimation: true,
                itemStyle: {
                    normal: {
                        color: '#4bb6fc',
                        shadowBlur: 10,
                        shadowColor: '#333'
                    }
                },
                zlevel: 1
            }
        ]
    };
}
// data = utils.linerScale(data, 'per')
mapData();
var chinaDiv = echarts.init(document.getElementById('chinaDiv'));
chinaDiv.setOption(option_china);
// function setChinaMap(datas) {
//     geoCoordMap = datas.coords;
//     data = utils.linerScale(datas.data, 'value')
//     mapData();
//     var chinaDiv = echarts.init(document.getElementById('chinaDiv'));
//     chinaDiv.setOption(option_china);
// }

// setChinaMap()
// 游客出行方式
option_mood = {
    color: ['#099fac', '#104d30', '#009bff', '#0069ad', '#003d62'],
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        top: '85%',
        data: ['自由行', '跟团'],
        textStyle: {
            fontSize: 12,
            color: '#F1F1F3'
        }
    },
    label: {
        normal: {
            textStyle: {
                color: "#ffffff"
            }
        }
    },
    series: [
        {
            name: '游客出行方式',
            type: 'pie',
            radius: ['20%', '50%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: true
                }
            },
            labelLine: {
                normal: {
                    show: true
                }
            },
            data: [{name:'自由行',value:21139},{name:'跟团',value:35135}]
        }
    ]
};
// function setTrip(para) {
//     option_mood.series[0].data = [];
//     para.forEach(function (val, index) {
//         var obj = {};
//         obj.name = val.name;
//         obj.value = val.value;
//         option_mood.series[0].data.push(obj)
//     })
//     var mood = echarts.init(document.getElementById('mood'));
//     mood.setOption(option_mood, true);
// }
var mood = echarts.init(document.getElementById('mood'));
    mood.setOption(option_mood, true);

// function dataSearch(t1) {
//     // 加载数据
//     loadData({
//         type: 'get',
//         url: '/bigdata/manage/portrait/info',
//         data: { interval: t1 },
//         callback: function (res) {
//             // 游客性别统计
//             setSex(res.result.sex);
//             // 游客年龄统计
//             setAge(res.result.age);
//             // 星座排名
//             setStar(res.result.zodiac)
//             setCustom(res.result.map.data)
//             // 地图
//             setChinaMap(res.result.map)
//             // 游客出行方式
//             setTrip(res.result.trip)
//             // 职业分布情况
//             setProfession(res.result.work)
//             // 学历统计
//             xueLi(res.result.grade)
//         }
//     })
// }
// dataSearch(30)
$(function () {
    $(".day").click(function () {
        $(".day").removeClass("act");
        $(".month").addClass("act");
        dataSearch(30)
    })
    $(".month").click(function () {
        $(".month").removeClass("act");
        $(".day").addClass("act");
        dataSearch(90)
    })
})
/*var tres = {
    "code": 0,
    "msg": "success",
    "result": {
        "map": {
            "data": [{"name": "河南", "value": "7620"}, {"name": "山东", "value": "860"}, {
                "name": "河北",
                "value": "517"
            }, {"name": "安徽", "value": "144"}, {"name": "江苏", "value": "143"}, {
                "name": "山西",
                "value": "140"
            }, {"name": "辽宁", "value": "110"}, {"name": "湖北", "value": "83"}, {
                "name": "广东",
                "value": "61"
            }, {"name": "陕西", "value": "58"}],
            "coords": {
                "河南": ["113.486804", "34.157184"],
                "山东": ["118.527663", "36.09929"],
                "河北": ["115.661434", "38.61384"],
                "安徽": ["117.216005", "31.859252"],
                "江苏": ["119.368489", "33.013797"],
                "山西": ["112.515496", "37.866566"],
                "辽宁": ["122.753592", "41.6216"],
                "湖北": ["112.410562", "31.209316"],
                "广东": ["113.394818", "23.408004"],
                "陕西": ["109.503789", "35.860026"]
            }
        },
        "sex": [{"name": "男性游客", "value": "4987", "num": "49.06"}, {"name": "女性游客", "value": "5178", "num": "50.94"}],
        "age": {
            "name": ["0-17岁", "18-24岁", "25-29岁", "30-34岁", "35-39岁", "40岁以上"],
            "value": ["272", "983", "1620", "1878", "1355", "4057"]
        },
        "zodiac": {
            "name": ["水瓶座", "双鱼座", "白羊座", "金牛座", "双子座", "巨蟹座", "狮子座", "处女座", "天秤座", "天蝎座", "射手座", "摩羯座"],
            "value": ["802", "915", "735", "861", "795", "835", "848", "890", "991", "907", "784", "802"]
        },
        "trip": [{"name": "自由行", "value": "74270"}, {"name": "跟团", "value": "50359"}],
        "work": {"cnum": [{"name": "未知", "value": "3", "per": "75"}, {"name": "媒体艺术", "value": "1", "per": "25"}]},
        "grade": {
            "list": [{"name": "未知", "value": "0", "per": "0"}, {
                "name": "初中",
                "value": "0",
                "per": "0"
            }, {"name": "高中", "value": "0", "per": "0"}, {"name": "本科", "value": "4", "per": "100"}, {
                "name": "硕士",
                "value": "0",
                "per": "0"
            }, {"name": "博士", "value": "0", "per": "0"}]
        },
        "interval": "30"
    }
}
setChinaMap(tres.result.map)*/









